import React from 'react'
import { Form,Table, Icon, Tag, Modal, Steps, Button, message,Input,Row,Col,Select,DatePicker,InputNumber,Dropdown,Menu } from 'antd'
import { DropOption } from 'components'
import styles from './List.less'
import moment from "moment"
const Step = Steps.Step;
const confirm = Modal.confirm
const FormItem = Form.Item;
const Option = Select.Option;

class ModalSelect extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      current: 0,
      value:'',
      bottons:'查看'
    };
  }
	show(){
		const {showList} = this.props
		showList()
	}
	delete(){
		const {onDeleteItem,info} = this.props
		onDeleteItem(info.document.id)
	}
  bottonClick(i){
//	console.log(this.state.bottons)
	if (document.getElementById(i).style.display != "block") {
		document.getElementById(i).style.display = 'block'
	} else {
		document.getElementById(i).style.display = 'none'
	}
  	if(this.state.bottons == '查看'){
  		this.setState({bottons:"隐藏"})
  	}else{
  		this.setState({bottons:"查看"})
  	}
  }

	render(){
		const {info} = this.props
//		console.log(info)
		var list =[]
		var photoPage =[]
		if(info!= undefined || info!= ''){
			if(!info){
				return null
			}
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"档案编号"}:{info.document.number}</li>)
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"档案名称"}:{info.document.title}</li>)
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"档案类型"}:{info.document.archivesType}</li>)
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"业务类型"}:{info.document.businessType}</li>)
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"建档时间"}:{moment(info.document.createTime).format("YYYY-MM-DD HH:mm:ss")}</li>)
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"所属部门"}:{info.document.departmentName}</li>)
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"所属组织"}:{info.document.organizationName}</li>)			
			list.push(<li style={{width:"50%",lineHeight:"40px"}}>{"创建人"}:{info.document.createUserName}</li>)
			
//			var menu = JSON.parse(info.document.basicInfo)
			var pages = info.document.documentBillList
//			for(let i=0;i<menu.length;i++){
//				list.push(<li key={i} style={{width:"33.3%",lineHeight:"40px"}}>{menu[i].name}:{menu[i].value}</li>)
//			}
			for(let i=0;i<pages.length;i++){
				photoPage.push(
					<div>
						<div style={{ display: "flex", justifyContent: "space-between", margin: "10px 20px", background: "#f4f4f4", lineHeight: "50px", borderRadius: 5 }}>
							<span style={{ marginLeft: 10,fontWeight:600 }}>{i + 1}.{pages[i].name} [{pages[i].billfileList.length}条]</span>
							<div style={{marginRight:10}}>
								<Button type="primary"
									onClick={this.bottonClick.bind(this, i)}
									style={{ border: "1px solid #DDDDDD", marginRight: 10, color: "black", backgroundImage: "linear-gradient(180deg,#fdfdfd 0%,#dddddd 98%)" }}>
									查看
								</Button>
								
							</div>
						</div>
						<div id={i} style={{ overflow: "scroll", height: "200px", margin: "0 40px", display: "none" }}>
							<div className="clearfix">
								{
									pages[i].billfileList.map((item,i)=>{
										return(
											<img src={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token")} style={{ width: 80, margin: 5 }} />
										)
									})
								}
							</div>

						</div>
					</div>
				)	
			}
		}
		
		return (
	     	<div>
				<div style={{marginBootm:30}}>
					<span style={{fontSize:20,marginLeft:20,fontWeight:600}}>文档信息:</span>
					<br/>
					<ul style={{display:"flex",flexWrap:"wrap",margin:"0 10px",marginLeft:40}}>
						{list}
					</ul>
				</div>
		        <div className="listLib">
            		<span style={{fontSize:20,marginLeft:20,fontWeight:600}}>资料清单:</span>
            		<div>
            		{photoPage}
            		</div>	
            		<div style={{width:"50%"}}>
	            		<Button style={{width:100,marginTop:20,height:30,marginRight:20}} type="primary" onClick={this.delete.bind(this,1)}>销毁</Button>
                		<Button style={{width:100,marginTop:20,height:30}} type="primary" onClick={this.show.bind(this)}>取消</Button>
	            </div>
            </div>
            {/*<Button style={{width:200,marginTop:30,height:40}} type="primary" onClick={this.show.bind(this)}>返回</Button>*/}
	     </div>
	  	)
}
  

}

export default Form.create()(ModalSelect)
